<template>
  <div class="rolemanage">
    <el-form class="top">
      <el-form-item>
        <el-input v-model="formList.name" placeholder="请填写姓名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="formList.account"
          placeholder="请填写账号"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formList.department" placeholder="请选择科室">
          <el-option
            v-for="item in departmentlist"
            :key="item.value"
            :label="item.departmentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="formList.state" placeholder="请选择状态">
          <el-option
            v-for="item in statelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="form_btn">
        <el-button type="danger" @click="search">搜索</el-button>
        <el-button type="primary" @click="foundAccount(true)">添加</el-button>
      </el-form-item>
    </el-form>
    <v-table
      v-if="tableData && tableData.length > 0"
      :header="header"
      :tableList="tableData"
    ></v-table>
    <v-pagination :total="total" @currentPage="currentPage"></v-pagination>
    <role-dialog
      v-if="activeRoleDialog"
      :activeRoleDialog="activeRoleDialog"
    ></role-dialog>
    <edit-dialog
      v-if="editRoleDialog"
      :editRoleDialog="editRoleDialog"
      :type="type"
      :list="list"
    ></edit-dialog>
  </div>
</template>

<script>
import vTable from "@/components/Table/index";
import roleDialog from "./addAccount"; //添加
import editDialog from "./editAccount"; //添加
import vPagination from "../../components/pagination/index";

export default {
  data() {
    return {
      disable: true,
      list: {},
      type: "",
      formList: {
        name: "",
        hospitalizationID: "",
        department: "",
      },
      departmentlist: [
        {
          label: "妇产科",
          value: "1",
        },
      ],
      statelist: [
        {
          label: "启用",
          value: "0",
        },
        {
          label: "禁用",
          value: "1",
        },
      ],
      header: [
        { prop: "account", label: "账号" },
        { prop: "username", label: "姓名" },
        { prop: "departmentName", label: "所属科室" },
        { prop: "roleName", label: "角色类型" },
        {
          prop: "isDisable",
          label: "状态",
          render: (h, data) => {
            return h("el-switch", {
              props: {
                "active-value": "1",
                "inactive-value": "0",
                "active-color":"red",
                value: data.row.isDisable,
              },
              on: {
                change: () => {
                  this.changeDisable(data.row);
                },
              },
            });
          },
        },
        {
          label: "操作",
          render: (h, data) => {
            return (
              <div>
                <el-button
                  type="text"
                  onClick={() => {
                    this.lookDetails(true, data.row, "look");
                  }}
                >
                  查看
                </el-button>
                <el-divider direction="vertical"></el-divider>
                <el-button
                  type="text"
                  onClick={() => {
                    this.editDetails(true, data.row);
                  }}
                >
                  修改
                </el-button>
             
              </div>
                //  <el-divider direction="vertical"></el-divider>
                // <el-button
                //   type="text"
                //   onClick={() => {
                //     this.delDetails(data.row);
                //   }}
                // >
                //   删除
                // </el-button>
            );
            
          },
        },
      ],
      tableData: [{}],
      activeRoleDialog: false,
      editRoleDialog: false,
      pcMenu: [
        {
          id: 4,
          deanId: 2,
          title: "主页",
          parentId: 0,
          path: "/home",
          alwaysShow: false,
          redirect: "/index",
          component: "layout",
          roles: "sys:noAccess",
          hidden: false,
          perOrder: 1,
          createTime: "2021-04-14T01:03:11.000+0000",
          updateTime: "2021-04-14T01:03:14.000+0000",
          isDelete: "0",
          clientType: "0",
        },
        {
          id: 6,
          deanId: 2,
          title: "床位管理",
          parentId: 0,
          path: "/beds",
          alwaysShow: true,
          redirect: "/bedManagement",
          component: "layout",
          roles: "sys:noAccess",
          hidden: false,
          perOrder: 1,
          createTime: "2021-04-14T01:08:20.000+0000",
          updateTime: "2021-04-14T01:08:22.000+0000",
          isDelete: "0",
          clientType: "0",
        },
        {
          id: 8,
          deanId: 2,
          title: "患者详情",
          parentId: 0,
          path: "/patient",
          alwaysShow: false,
          redirect: "/patientDetails",
          component: "layout",
          roles: "sys:noAccess",
          hidden: true,
          perOrder: 1,
          createTime: "2021-04-14T01:11:55.000+0000",
          updateTime: "2021-04-14T01:11:57.000+0000",
          isDelete: "0",
          clientType: "0",
        },
        {
          id: 10,
          deanId: 2,
          title: "添加患者",
          parentId: 0,
          path: "/patientadd",
          alwaysShow: true,
          redirect: "/addPatient",
          component: "layout",
          roles: "sys:noAccess",
          hidden: false,
          perOrder: 1,
          createTime: "2021-04-14T01:14:38.000+0000",
          updateTime: "2021-04-14T01:14:40.000+0000",
          isDelete: "0",
          clientType: "0",
        },
      ],
      total: 10,
    };
  },
  components: {
    vTable,
    roleDialog,
    vPagination,
    editDialog,
  },
  mounted() {
    let data = {};
    this.getAllRoleInfo(data);
    let routeid = sessionStorage.getItem("routeID");
    let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
    this.getDepartment(routeID);
  },
  methods: {
     //当前页
    currentPage(val) {
      let data = {
        current: val,
        size: 10,
      };
        this.getAllRoleInfo(data);
    },
    changeDisable(row) {
      console.log(row);
      // debugger
      let isDisable = parseInt(row.isDisable);
      console.log(row.isDisable);
      let data = {
        userId: row.userId,
        isDisable: row.isDisable == 1 ? "0" : "1",
      };
      this.$confirm("此操作将改变用户状态, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "成功!",
          });
          this.$api.updateUserStatus(data).then((res) => {
            let data = {};
            this.getAllRoleInfo(data);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //搜索
    search() {
      let data = {
        departmentId: this.formList.department,
        isDisable: this.formList.state,
        username: this.formList.name,
        account: this.formList.account,
      };
      // console.log(data);
      this.getAllRoleInfo(data);
    },
    // 查询所有科室
    getDepartment(val) {
      let data = {
        perId: val,
      };
      this.$api.getDepartment(data).then((res) => {
        this.departmentlist = res.data.data;
        // console.log(this.departmentlist2);
      });
    },
    // 查看全部角色
    getAllRoleInfo(data) {
      this.$api
        .getAllRoleInfo(data)
        .then((res) => {
          this.tableData = res.data.data;
          // .map((item) => {
          //   item.isDisable == 0
          //     ? (item.isDisable = true)
          //     : (item.isDisable = false);
          //   return item;
          // });
          this.total = res.total;
          // console.log(this.total);
        })
        .catch((err) => {
          if (err.code == 6000) {
            this.tableData = [];
            this.total = 0;
          }
          // console.log(err);
        });
    },
    // 添加权限
    foundAccount(data) {
      this.activeRoleDialog = data;
    },
    //查看权限
    lookDetails(status, row, type) {
      // this.status = true;
      this.type = type;
      this.editRoleDialog = status;
      this.list = row;
      // sessionStorage.setItem("roleId", this.list.userId);
      // console.log(row);
    },
    //编辑权限
    editDetails(status, row) {
      this.lookDetails(status, row, "edit");
      this.list = row;
      // console.log(this.list.userId);
    },
    //删除权限
    delDetails(row) {
      // console.log(row);
      this.status = true;
      let data = {};
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.$api
            .deleteRole(data)
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.rolemanage {
  background-color: #fff;
  padding: 0 28px;
  .top {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    padding: 20px 0;
    .el-form-item {
      margin-bottom: 0;
      margin-right: 40px;
      & >>> .el-form-item__content {
        // background-color: #01A7F0;
        .el-input__inner {
          width: 180px;
        }
      }
    }
    .form_btn {
      position: absolute;
      right: -40px;
    }
    @media screen and (max-width: 1343px) {
      .el-form-item {
        margin-bottom: 10px;
        margin-right: 0;
      }
      .form_btn {
        position: relative;
        right: 0;
      }
    }
  }
  @media screen and (max-width: 1343px) {
    .top {
      justify-content: space-between;
    }
  }
}
</style>